<template>
    <view class="page">
        <u-navbar title="我的收藏" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <!-- <view style='height: 30rpx;'></view> -->
        <view class="favorite">
            <view class="product" v-for="(item, index) in productList" @click="detailClick(item)" v-if="item.type == 1">
                <view class="product-image" v-if="item.type == 1">
                    <img class="product-image" :src="item.cover" mode="aspectFill" alt="">
                </view>
                <view class="product-detail" v-if="item.type == 1">
                    <view class="product-name">{{item.name}}</view>
                    <view class="detail">
                        <view class="product-info">
                            <view class="product-price">￥{{item.price}}</view>
                            <!-- <view class="ret-yuans" v-if="item.price0">¥{{item.price0?item.price0:''}}</view> -->
                            <!-- <view class="sale">{{item.collect_time}}</view> -->
                            <!-- <view class="sale">已售{{item.count}}件</view> -->
                        </view>
                        <view class="btn-info" @click.stop="cancelFavorite(item)">
                            <view v-if="item.status == 1" class="btn">取消收藏</view>
                            <view v-else class="btn">设为收藏</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <no-data noneTitle="暂无收藏" noneImg="../../static/noData/content.png" type="favorite" v-if="productList.length==0"></no-data>
    </view>
</template>

<script>
import {
    getCollectListsAll,
    setCollect,
} from "@/api/my/favorite"
export default {
    data() {
        return {
            productList: [
            ],
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            isLogin: uni.getStorageSync('token') ? true : false,
        }
    },
    onLoad() {
        if (this.isLogin) {
            this.getCollectListsAll();
        }
    },
    methods: {
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        getCollectListsAll() {
            getCollectListsAll().then((res) => {
                console.log(res, 'CollectLists')
                this.productList = res.data
            })
        },
        cancelFavorite(item) {
            uni.showModal({
                content: '确认取消收藏吗',
                success: (res) => {
                    if (res.confirm) { // 用户点击了确定
                        let params = {
                            match_code: item.match_code,
                            type: item.type
                        }
                        setCollect(params).then((res) => {
                            // this.addressList.splice(currentIndex, 1) // 删除当前索引对应的数据
                            this.getCollectListsAll()
                            console.log(this.getCollectListsAll, '++++++')
                            // this.item.status =  !this.item.status
                            // uni.setStorageSync('addressList', address)
                        })
                    } else {
                        console.log('用户点击了取消')
                    }
                }
            })
        },
        detailClick(item) {
            uni.navigateTo({
                url: '/pagesA/mall/goodsDetails?code=' + encodeURIComponent(item.match_code) + "&invite=" + uni.getStorageSync(
                    "invite_code") || '',
            })
        }
    }
}
</script>

<style scoped>
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}

.favorite {
  background: #fff;
}

.product {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx 20rpx 30rpx;
  border-top: 30rpx solid #f2f2f2;
}

.product-image {
  height: 150rpx;
  width: 150rpx;
  border-radius: 6rpx;
}

.product-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-left: 25rpx;
  width: 500rpx;
}

.detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 45rpx;
  width: 500rpx;
}

.product-info {
  display: flex;
  align-items: center;
}

/* .ret-yuans {
        color: #a6a8ae;
        font-size: 28rpx;
        margin-left: 13rpx;
        text-decoration: line-through;
      } */

.product-name {
  font-size: 30rpx;
  width: 500rpx;
  overflow: hidden;
  /* 超出一行文字自动隐藏 */
  text-overflow: ellipsis;
  /* 文字隐藏后添加省略号 */
  white-space: nowrap;
  /* 强制不换行 */
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150rpx;
  height: 55rpx;
  background: #e5e5e5;
  border-radius: 60rpx;
  color: #999;
  font-size: 26rpx;
}

.product-price {
  color: #ff6900;
  font-size: 28rpx;
  /* margin-right: 30rpx; */
}

.sale {
  color: #999999;
  font-size: 26rpx;
}
</style>